<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <script src="resources/js/jquery-1.9.0-min.js"></script>
    <script src="resources/js/jquery-ui-1.9.2.min.js"></script>

    <script type="text/javascript">
        $(function(){
            //数据源拖拽，监听开始拖动与释放拖动
            $("#ele").draggable({
                helper:"clone",//设置helper属性为复制
                //containment: "parent",//设置数据源能拖动的范围
                snap: "#div2",//设置吸附
                //handle: "#handleSpan",//设置某个元素作为拖动的把手

                revert: "invalid",//指定当drop失败时source“飘”回原来的位置
                cursor: "move",//指定拖动时鼠标指针的形状
                //cursorAt: { top: 50, left: 50 },//指定鼠标指针在source的相对位置
                start: function(event, ui){
                    $(this).text("");
                    $(this).append("开始拖动时触发;");
                },
                stop: function(event, ui){
                    $(this).append("释放时触发");
                }
            });

            //在目标容器中监听事件
            $("#div2").droppable({
                activate: function(event,ui) {
                    $(this).text("可以将元素拖动到这里");
                },
                over: function(event,ui) {
                    $(this).text("数据源被拖动到这里了，但还没有将数据源放在这里");
                },
                out: function(event,ui) {
                    $(this).text("数据源被拖动离开了");
                },
                drop: function( event, ui ) {
                    $(this).text("数据源已经成功放在这里");
                    $(this).append($("<div id='ele2' style='width: 100px; height: 100px; background-color: red;'></div>"));
                }
            });
        });
    </script>

</head>
<body>
    <div id="div1" style="width: 400px; height: 400px; border: 1px solid black; margin: 5px; float: left;">
        <div id="ele" style="width: 100px; height: 100px; background-color: red;">
            <!--<div id="handleSpan" style="width: 30px; height: 30px; background-color: black;"></div>-->
        </div>
    </div>

    <div id="div2"
         style="width: 400px; height: 400px; border: 1px solid black;
         : 5px; float: left; background-image: url('resources/images/grid.png')">

    </div>

</body>
</html>